<template>
  <div>
    <!--红包雨-->
    <div class="playBotn" @click="playPack">
      点击开抢
    </div>
<!--    <p>您可以根据红包大小决定优惠程度</p>-->


    <div class="ser_home" v-show="packShow">
      <ul class="red_packet" id="red_packet">
        <li v-for="(item, index) in liParams" :key="item.id"
            :style="{ left: item.left, animationDuration: item.durTime, webkitAnimationDuration: item.durTime}"
            :class="item.cls"
            :data-index="index"
            @webkitAnimationEnd="removeDom"
        >
          <a @click.stop="hongbao(index)" v-show="item.index != index">
            <i :style="{ transform: item.transforms, webkitTransform: item.transforms}"></i>
          </a>
        </li>
      </ul>
      <div class="packRed">
        <p>倒计时{{ packTime }}s，抢到了{{ packNum }}个红包</p>
      </div>
    </div>
  </div>
</template>

<script>
import {Dialog} from 'vant';

export default {
  name: "RedEnvelopes",
  data() {
    return {
      liParams: [],
      timer: null,
      duration: 10000, // 红包定义时间
      packNum: 0,
      packShow: false,
      packTime: 14, //弹窗展示时间
      setInter: "",
      timerOpening:null,
      opTimer:null,
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    playPack() {
      this.packShow = true;
      this.startRedPacket();
      this.timerOpening = setTimeout(() => {
        this.packShow = false;
        Dialog.alert({
          title: "恭喜",
          message: "您抢到了" + this.packNum + "个红包",
        })
            .then(() => {
              clearInterval(this.setInter);
              this.$router.push({path:'/index'})
            });
      }, 14000);
      this.setInter = setInterval(() => {
        this.packTime -= 1;
      }, 1000);
    },
    /**
     * 开启动画
     */
    startRedPacket() {
      let win =
          document.documentElement.clientWidth || document.body.clientWidth;
      let left = parseInt(Math.random() * (win - 50) + 0);
      let rotate = parseInt(Math.random() * (45 - -45) - 45) + "deg"; // 旋转角度
      let scales = (Math.random() * (12 - 8 + 1) + 8) * 0.1; // 图片尺寸
      let durTime = Math.random() * (2.5 - 1.2 + 1) + 3 + "s"; // 时间  1.2和1.2这个数值保持一样
      this.liParams.push({
        left: left + "px",
        cls: "move_1",
        transforms: "rotate(" + rotate + ") scale(" + scales + ")",
        durTime: durTime,
      });
      this.opTimer = setTimeout(() => {
        // 多少时间结束
        clearTimeout(this.timer);
        return;
      }, this.duration);
      this.timer = setTimeout(() => {
        this.startRedPacket();
      }, 100);
    },
    /**
     * 回收dom节点
     */
    removeDom(e) {
      let target = e.currentTarget;
      document.querySelector("#red_packet").removeChild(target);
    },
    hongbao(index) {
      this.liParams[index].index = index;
      this.packNum += 1;
    },
  },
  beforeDestroy() {
    if(this.timer || this.timerOpening || this.opTimer){
      clearTimeout(this.timer)
      clearTimeout(this.opTimer)
      clearTimeout(this.timerOpening)
    }
  }
};
</script>

<style scoped lang="less">
.playBotn {
  width: 100%;
  font-size: 40px;
  text-align: center;
  background: red;
  color: #fff;
}

.ser_home {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  width: 100%;
  height: 100vh;
}

.packRed {
  position: fixed;
  top: 10px;
  right: 10px;
  display: flex;

  p {
    padding: 10px 15px;
    box-sizing: border-box;
    border-radius: 20px;
    background: red;
    color: #fff;
    font-size: 26px;
  }
}

.red_packet {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;

  i {
    width: 48px;
    height: 69px;
    display: block;
    background: url("https://sucai.suoluomei.cn/sucai_zs/images/20201013173323-hbfxhb.png") no-repeat;
    background-size: 100% 100%;
  }

  li {
    position: absolute;
    animation: all 3s linear;
    top: -100px;
    z-index: 10;

    &.move_1 {
      -webkit-animation: aim_move 5s linear 1 forwards;
      animation: aim_move 5s linear 1 forwards;
    }
  }

  a {
    display: block;
  }
}

@keyframes aim_move {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(120vh);
    transform: translateY(120vh);
  }
}
</style>

